<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link type="text/css" rel="stylesheet" href="../css/mui.min.css" />
		<style type="text/css">
			.outer-box {
				height: 200px !important;
				border: solid 1px #0000ff;
			}
			.outer-box2 {
				height: 30px;
				line-height: 30px;
				border: solid 1px #FF0000;
			}

			.inner-box {
				overflow: auto;
			}

			.test {
				width: 100%;
				height: 30px;
				color: #FF0000;
				font-size: 16px;
				line-height: 30px;
				text-align: center;
			}

			.test2 {
				color: #00ff00;
			}
			
			.mui-scroll .mui-scroll-wrapper,
			.mui-scroll .mui-scroll {
				position: relative;
			}
			
			.mui-pull-bottom-tips {
				margin-bottom: 15px;
				text-align: center;
				color: #999999;
			}
			.brf {
				position: fixed;
				top: 0;
				left: 0;
				width: 200px;
				background: rgba(100, 100, 100, .2);
				color: red;
				z-index: 999;
				padding: 6px 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="background: #ffffff; box-shadow: none;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">测试scroll</h1>
		</header>
		<div class="mui-fullscreen single"></div>
		<div class="mui-content mui-scroll-wrapper outer">
			<div class="mui-scroll">
				<div class="outer-box test">3221321</div>
				<div class="outer-box2 test">3221321</div>
				<div class="mui-scroll-wrapper inner">
					<div id="dataBox" class="mui-scroll" style="border: solid 1px green;">
						<div class="list-box">
							<!-- <div class="test test2">000000</div>
							<div class="test test2">1111111</div>
							<div class="test test2">22222222</div>
							<div class="test test2">3221321111</div>
							<div class="test test2">32213211111</div>
							<div class="test test2">322132111111</div>
							<div class="test test2">3221321111111</div>
							<div class="test test2">32213211111111</div>
							<div class="test test2">322132111111111</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">3221321</div>
							<div class="test test2">32213211</div>
							<div class="test test2">322132111</div>
							<div class="test test2">3221321111</div>
							<div class="test test2">32213211111</div>
							<div class="test test2">322132111111</div>
							<div class="test test2">3221321111111</div>
							<div class="test test2">32213211111111</div>
							<div class="test test2">322132111111111</div>
							<div class="test test2">3221321111111111</div>
							<div class="test test2">32213211111111111</div>
							<div class="test test2">322132111111111111</div>
							<div class="test test2">3221321111111111111</div>
							<div class="test test2">32213211111111111111</div>
							<div class="test test2">322132111111111111111</div>
							<div class="test test2">3221321111111111111111</div> -->
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="brf">
			<div id="outerY"></div>
			<div id="innerY"></div>
		</div>
	</body>
	
	<script type="text/javascript" src="../../js/mui/mui.min.js"></script>
	<script type="text/javascript" src="../../js/mui/mui.pullToRefresh.js"></script>
	<script type="text/javascript" src="../../js/mui/mui.pullToRefresh.material.js"></script>
	
	<script type="text/javascript">
		var num = 1,
			OTI = true,
			ITO = false,
			outerScroll,
			innerScroll, 
			outer = '.mui-scroll-wrapper.outer',
			inner = '.mui-scroll-wrapper.inner',
			fullscreen = document.querySelector('.mui-fullscreen.single').clientHeight - 45,
			scrollOption = {
				scrollY: true,
				scrollX: false,
				bounce: true,
				indicators: false, //是否显示滚动条
				deceleration: 0.0006
			},
			pullUpOption = {
				up: {
					height: 50,//可选.默认50.触发上拉加载拖动距离
					auto: false,//可选,默认false.自动上拉加载一次
					contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
					contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
					callback: pullfreshCallback //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				}
			};
		
		mui.init();
		var fullDiv = document.createElement('div');
		fullDiv.setAttribute('style', 'position: fixed; bottom: 0; left: 0; top: 0;');
		fullDiv.setAttribute('id', 'fullH');
		document.body.appendChild(fullDiv);
		console.log('full h2 -> ' + fullDiv.clientHeight);
		
		console.log("outer c h -> " + document.querySelector('.outer>.mui-scroll').clientHeight + 
		'\ninner c h -> ' + document.querySelector('.inner>.mui-scroll').clientHeight + 
		'\nmui-fullscreen -> ' + fullscreen)
		
		console.log("outer s h -> " + document.querySelector('.outer>.mui-scroll').scrollHeight + 
		'\ninner s h -> ' + document.querySelector('.inner>.mui-scroll').scrollHeight + 
		'\nmui-fullscreen -> ' + fullscreen)
		
		// document.querySelector('.inner>.mui-scroll').style.height = fullscreen + 'px';
		document.querySelector('.mui-scroll-wrapper.inner').style.height = (fullscreen - 25) + 'px'
		// document.querySelector('.mui-scroll-wrapper.outer').style.height = fullscreen + 200 + 'px'
		
		console.log("outer s h -> " + document.querySelector('.outer>.mui-scroll').scrollHeight + 
		'\ninner s h -> ' + document.querySelector('.inner>.mui-scroll').scrollHeight + 
		'\ninner c h -> ' + document.querySelector('.inner>.mui-scroll').clientHeight + 
		'\nmui-fullscreen -> ' + fullscreen);
		
		// scrollOption.bounce = true;
		// 初始化内部滚动
		innerScroll = mui(inner).scroll(scrollOption);
		
		// 初始化内部上拉加载
		var ptf = mui('.inner>.mui-scroll').pullToRefresh(pullUpOption);
		
		// 取消内部 滚动 和 推拽 的监听
		document.querySelector(inner).removeEventListener('drag', innerScroll);
		window.removeEventListener('scroll', innerScroll);
		
		// 取消内部上拉加载有关的 上拉拖拽 和 滚动 监听
		document.querySelector('.inner>.mui-scroll').removeEventListener('dragup', ptf);
		window.removeEventListener('scroll', ptf);
		// console.log(ptf.element.getAttribute('id'));
		
		// 初始化外部滚动
		scrollOption.bounce = false;
		outerScroll = mui(outer).scroll(scrollOption);
		
		// 添加外部区域滚动事件监听
		document.querySelector(outer).addEventListener('scroll', outerToInner, false);
		
		// 添加内部区域滚动事件监听
		// document.querySelector(inner).addEventListener('scroll', innerToOuter, false);
		
		// 上拉加载回调
		function pullfreshCallback() {
			alert(1);
			setTimeout(function(){
				alert(2);
				for (var i = 0; i < 10; i++) {
					var div = document.createElement('div');
					div.innerHTML = '第 ' + num + '-' + i + '个div!!!';
					document.querySelector('.list-box').appendChild(div);
				}
				num++;
				console.log('num -> ' + num)
				mui('.inner>.mui-scroll').pullToRefresh().endPullUpToRefresh(num > 2);
			}, 500);
		}
		
		function outerToInner() {
			console.log("outer scroll -> ");
			console.log(outerScroll);
			console.log('outer scroll y -> ' + outerScroll.y + '\n\n')
			console.log('outer scroll offset top -> ' + document.querySelector('.outer>.mui-scroll').offsetTop)
			console.log('outer scroll scroll top -> ' + document.querySelector('.outer>.mui-scroll').scrollTop)
			console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
			console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
			document.querySelector('#outerY').innerHTML = 'outerY：' + outerScroll.y
			if (OTI && outerScroll.y <= -200) {
				// outerScroll.scrollTo(0, -200, 100);
				document.querySelector(outer).removeEventListener('drag', outerScroll);
				window.removeEventListener('scroll', outerScroll);
				
				document.querySelector(inner).addEventListener('drag', innerScroll);
				window.addEventListener('scroll', innerScroll);
				
				document.querySelector('.inner>.mui-scroll').addEventListener('dragup', ptf);
				window.addEventListener('scroll', ptf);
				
				ITO = true;
				OTI = false;
				setTimeout(function(){
					document.querySelector(outer).removeEventListener('scroll', outerToInner, false);
					document.querySelector(inner).addEventListener('scroll', innerToOuter, false);
				}, 300);
			}
		}
		
		function innerToOuter() {
			console.log('inner scroll -> ');
			console.log(innerScroll);
			console.log('inner scroll y -> ' + innerScroll.y + '\n\n')
			console.log('inner scroll offset top -> ' + document.querySelector('.inner>.mui-scroll').offsetTop)
			console.log('inner scroll scroll top -> ' + document.querySelector('.inner>.mui-scroll').scrollTop)
			console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
			console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
			document.querySelector('#innerY').innerHTML = 'innerY：' + innerScroll.y
			if (ITO && innerScroll.y >= 0) {
				// innerScroll.scrollTo(0, 0, 100);
				document.querySelector(inner).removeEventListener('drag', innerScroll);
				window.removeEventListener('scroll', innerScroll);
				
				document.querySelector('.inner>.mui-scroll').removeEventListener('dragup', ptf);
				window.removeEventListener('scroll', ptf);
				
				document.querySelector(outer).addEventListener('drag', outerScroll);
				window.addEventListener('scroll', outerScroll);
				
				OTI = true;
				ITO = false;
				setTimeout(function(){
					document.querySelector(inner).removeEventListener('scroll', innerToOuter, false);
					document.querySelector(outer).addEventListener('scroll', outerToInner, false);
				}, 300);
			}
		}
		
		function initInnerHeight() {
			
		}
	</script>
</html>
